<template>
  <div class="rent-salese">
    <head-top goBack="true" head-title="房屋租售" house-pub="发布"></head-top>
    <div class="back" @click="back"></div>
    <!--区域筛选-->
    <div class="screen">
      <mt-cell title="区域选择" @click.native="openArea">
        <span>
          {{areaText}}
          <img slot="icon" src="./images/shuaixuan@2x.png" width="18" height="18">
        </span>
      </mt-cell>
      <!--区域选择弹窗-->
      <mt-popup v-model="areaShow" class="area-class" position="bottom">
        <div class="btn_list">
          <button class="btn_one" @click="cancelBtn()">取消</button>
          <button class="btn_two" @click="sureBtn()">确定</button>
        </div>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </mt-popup>
    </div>
    <ul class="descript">
      <li class="vfor" v-for="(list,index) in detail" :key="index" @click="$router.push('/home/RentDetail/' + list.id)">
        <avatar class="avt" :list="list"></avatar>
        <div class="desc-wrapper">
          <div class="desc">
            {{list.content}}
          </div>
          <div class="pic_img clearfix">
            <div v-for="(item,index) in list.img" :key="index" class="img_li">
              <div class="img" v-lazy:background-image="item"></div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!--<div class="default" v-show="!detail.length && !noResult">-->
    <!--<p>数据加载中</p>-->
    <!--</div>-->
    <div class="default1" v-show="noResult">
      <p>抱歉！暂无数据</p>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import avatar from '../common/avatar.vue'
  import descPic from '../common/desPic.vue'
  import { Toast, Lazyload, Indicator } from 'mint-ui'
  import { getRentConfig, getRentSaleData } from '../../api/publishList'
  import { saveCityCode } from '../../common/js/cache.js'
  import Vue from 'vue'
  import wx from 'weixin-js-sdk'

  Vue.use(Lazyload, {
    loading: require('../../assets/imgDefault.png')
  })
  import data from '../../../static/data.json'

  let index = 0 // 默认设置二级的index
  let index2 = 0 // 默认设置三级的index
  let province = []
  let city = []
  let area = []
  export default {
    name: 'RentSale',
    data () {
      return {
        lists: [],
        noResult: false,
        isFirstEnter: false,
        // 区域选择
        code: 0,
        areaShow: false,
        areaText: '请选择省市区',
        array: [],
        keepArea: '',
        slots: [{
          flex: 1,
          values: province,
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: city,
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot4'
        }, {
          flex: 1,
          values: area,
          className: 'slot5',
          textAlign: 'center'
        }],
        // 经纬度
        Lat: '',
        Lng: '',
        citycode: ''
      }
    },
    components: {
      headTop,
      avatar,
      descPic
    },
    created () {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
      this._getLatLong()
      setTimeout(function () {
        Indicator.close()
      }, 5000)
      this.isFirstEnter = true
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'RentDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack || this.isFirstEnter) {
        // this._getLatLong()
        // this._getRentSaleData(this.code, this.Lat, this.Lng)
      }
      this.$route.meta.isBack = false
      this.isFirstEnter = false
    },
    mounted () {
      // console.log(data)
      data.map(res => {
        province.push(res.name)
      })
      data.map(res => {
        res.childs.map(res => {
          // console.log(res)
          city.push(res.name)
        })
      })
      data.map(res => {
        res.childs.map(res => {
          res.childs.map(res => {
            // console.log(res)
            area.push(res.name)
          })
        })
      })
    },
    methods: {
      back () {
        this.$router.push('/Home')
      },
      // 获取经纬度
      _getLatLong () {
        getRentConfig().then(res => {
          // console.log(res)
          if (res.code === 200) {
            wx.config({
              debug: false,
              appId: res.data.appId,
              nonceStr: res.data.nonceStr,
              rawString: res.data.rawString,
              signature: res.data.signature,
              timestamp: res.data.timestamp,
              jsApiList: [
                'getLocation',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
              ]
            })
            var that = this
            wx.ready(() => {
              wx.getLocation({
                type: 'gcj02',
                success: function (res) {
                  this.Lat = res.latitude
                  this.Lng = res.longitude
                  // console.log(this.Lat, this.Lng)
                  // console.log(res.latitude, res.longitude)
                  Indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                  })
                  that._getRentSaleData(0, this.Lat, this.Lng)
                  setTimeout(function () {
                    Indicator.close()
                  }, 5000)
                }
              })
            })
          }
        })
      },
      // 区域选择
      openArea () {
        this.areaShow = true
      },
      cancelBtn () {
        this.areaShow = false
      },
      sureBtn () {
        this.areaText = this.keepArea
        this.areaShow = false
        this.citycode = this.code.substr(0, 4)
        saveCityCode(this.citycode)
        this._getRentSaleData(this.code, this.Lat, this.Lng)
      },
      onValuesChange (picker, values) {
        // console.log(values)
        let one = values[0]
        let two = values[1]
        let three = values[2]
        index = province.indexOf(one) // 省
        if (index >= 0 && province.length > 0) {
          city = data[index].childs.map(res => { //  市
            return res.name
          })
          picker.setSlotValues(1, city)
          two = values[1]
        }

        index2 = city.indexOf(two) // 区
        if (index2 >= 0 && city.length > 0) {
          area = data[index].childs[index2].childs.map(res => {
            return [res.name, res.code]
          })
          let newarea = []
          for (var i = 0; i < Object.values(area).length; i++) {
            newarea.push(Object.values(area)[i][0])
            if (three == Object.values(area)[i][0]) {
              this.code = Object.values(area)[i][1]
            }
          }
          picker.setSlotValues(2, newarea)
          three = values[2]
        }
        this.keepArea = values.join('-') // 拼接字符串（选中好的值以-连接）
      },
      // 房屋租售数据获取
      _getRentSaleData (code, Lat, Lng) {
        this.noResult = false
        getRentSaleData(code, Lat, Lng).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            this.lists = res.data
          }
          if (this.lists.length === 0) {
            this.noResult = true
          } else {
            this.noResult = false
          }
        })
      }
    },
    computed: {
//    使最新发布的数据排在最前面
      detail () {
        if (this.lists.length < 0) {
          Toast({
            message: '暂无数据',
            position: 'middle',
            duration: 2500
          })
        } else {
          return this.lists.reverse()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .rent-salese {
    width: 100%;
    padding-top: 40px;
    position: relative;
    .back {
      width: 42px;
      height: 42px;
      line-height: 42px;
      opacity: 0;
      z-index: 667;
      position: absolute;
      top: 0;
      left: 0;
    }
    .screen {
      width: 100%;
      height: 48px;
      position: fixed;
      border-bottom: 1px solid #f2f2f2;
      .mint-popup {
        width: 100%;
      }

      .picker-item {
        font-size: 15px;
      }

      .picker-item.picker-selected {
        color: #0078de;
      }

      .btn_list {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #f2f2f2;
        .btn_one, .btn_two {
          width: 120px;
          height: 39px;
          background: #fff;
          outline: none;
          border: none;
          font-size: 15px;
        }
        .btn_one {
          float: left;
        }
        .btn_two {
          float: right;
          color: #007aff;
        }
      }
    }
    .descript {
      background-color: #fff;
      padding-top: 48px;
      .desc-wrapper {
        padding: 10px;
        .desc {
          line-height: 16px;
          font-size: 13px;
        }
        .pic_img {
          width: 100%;
          margin-top: 7px;
          .img_li {
            width: 24%;
            height: 80px;
            margin-top: 1%;
            float: left;
            margin-left: 1%;
            .img {
              width: 100%;
              height: 100%;
              background-size: cover;
              background-color: #f2f2f2;
            }
            .img-loading {
              width: 10px;
              height: 10px;
              margin: auto;
              background-color: #f2f2;
            }
          }
        }
      }
      .vfor {
        border-bottom: 10px solid #f2f2f2;
        &:last-child {
          border-bottom: none;
        }
      }
    }
    .default {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/loading.gif") no-repeat;
      background-size: 40px 40px;
      background-position: center;
      padding-bottom: 100px;
      p {
        font-size: 15px;
        color: #666;
        margin-top: 100px;
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 0px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 20px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 190px;
      }
    }
  }
</style>
